<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>预约信息</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

		<style>
			.status-bar {
				height: 44px;
				background-color: #000;
				color: white;
				display: flex;
				align-items: center;
				padding: 0 15px;
			}

			.header-section {
				padding: 15px;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.content-section {
				padding: 15px;
			}

			.workorder-info {
				margin-bottom: 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.status-tag {
				padding: 4px 8px;
				border-radius: 4px;
				background: #5cb85c;
				color: white;
			}

			.info-table {
				width: 100%;
				border-collapse: separate;
				border-spacing: 0 10px;
			}

			.info-table td {
				padding: 8px;
				border-bottom: 1px solid #e9ecef;
			}

			.label-td {
				width: 120px;
				color: #6c757d;
			}

			.date-td {
				color: #f0ad4e;
			}

			.image-td {
				display: flex;
				gap: 10px;
			}

			.image-placeholder {
				width: 80px;
				height: 80px;
				background: #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ddd;
			}

			.action-btns {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				padding: 15px;
				display: flex;
				justify-content: center;
				gap: 15px;
				border-top: 1px solid #e9ecef;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid p-0">
			<!-- 标题栏 -->
			<div class="header-section d-flex justify-content-between align-items-center">
				<a href="DaiPaiDan.html" class="text-decoration-none text-dark">
					<i class="bi bi-arrow-left"></i>
				</a>
				<h5 class="mb-0">预约信息</h5>
				<div class="d-flex align-items-center">
					<a href="#" class="text-decoration-none text-dark me-3">
						<i class="bi bi-three-dots-vertical"></i>
					</a>
					<a href="#" class="text-decoration-none text-dark">
						<i class="bi bi-qr-code"></i>
					</a>
				</div>
			</div>

			<!-- 内容区域 -->
			<div class="content-section">
				<div class="workorder-info">
					<span id="woNumber">维修单号：</span>
					<i class="bi bi-share ms-2"></i>
					<span class="status-tag">待派单</span>
				</div>

				<table class="info-table">
					<tr>
						<td class="label-td">故障位置：</td>
						<td id="faultLocationDetail"></td>
					</tr>
					<tr>
						<td class="label-td">维修日期：</td>
						<td class="date-td" id="repairDateDetail"></td>
					</tr>
					<tr>
						<td class="label-td">联系人：</td>
						<td id="contactNameDetail"></td>
					</tr>
					<tr>
						<td class="label-td">联系电话：</td>
						<td id="contactPhoneDetail"></td>
					</tr>
					<tr>
						<td class="label-td">故障描述：</td>
						<td id="faultReasonDetail"></td>
					</tr>

				</table>
				<div class="info-item">
					<span>故障图片:</span>
					<div class="d-flex gap-2">
						<div class="bg-gray-200" style="width: 80px; height: 60px;">
							<!-- 使用 img 标签显示图片 -->
							<img id="faultImage1" src="" alt="故障图片1"
								style="width: 100%; height: 100%; object-fit: cover;">
						</div>
						<div class="bg-gray-200" style="width: 80px; height: 60px;">
							<!-- 使用 img 标签显示图片 -->
							<img id="faultImage2" src="" alt="故障图片2"
								style="width: 100%; height: 100%; object-fit: cover;">
						</div>
					</div>
				</div>

				<!-- 操作按钮 -->
				<div class="action-btns">
					<button class="btn btn-outline-secondary" id="quxiao">取消工单</button>
					<button class="btn btn-primary" id="assignButton">指派</button>
				</div>
			</div>

		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">

						<h4 class="modal-title" id="myModalLabel">
							选择工人
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="from_table">
							<input type="hidden" name="state" value="3" />
							<input type="hidden" name="id" id="did" />
							<input type="hidden" name="wname" id="wname" />
							<input type="hidden" name="wphone" id="wphone" />
							<input type="hidden" name="enddate" id="enddate" value="" />
							<input type="hidden" name="senddate" id="senddate" value="" />
							<div class="form-group">
								<label class="col-sm-2 control-label">标题</label>
								<div class="col-sm-10">
									<select id="dep_disabledSelect" name="wid" class="form-control">
										<option value=0>请选择</option>

									</select>

								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭
						</button>
						<button type="button" class="btn btn-primary" id="tianjia">
							提交
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/content.min.js?v=1.0.0"></script>

		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/yyxxDPD.js"></script>

	</body>
</html>